<template>
    <div class="main-org">
        <div class="org-left">
            <el-skeleton :loading="data.isFirst" :rows="10" animated>
                <el-tree style="max-width: 600px" :default-expand-all="true" :highlight-current="true"
                    :expand-on-click-node="false" :icon="data.data.icon" :data="data.data" :props="defaultProps"
                    node-key="id" @node-click="event.right_Click">
                    <template #default="{ data }">

                        <i :class="data.icon" style="margin-right:2px"></i>

                        <span>{{ data.label }}</span><el-icon @click="event.open(data.id)" style="margin-left:8px">
                            <Edit />
                        </el-icon>
                    </template>
                </el-tree>
            </el-skeleton>
            <div style="width:230px ; border-top: 1px solid #eee; text-align: center;position: absolute; bottom: 25px;">
                <el-button type="primary" style="margin-top: 8px;margin-right: 16px; width: 200px; border-radius: 4px" size="small"
                    @click="event.AddDept">新增</el-button>
            </div>
        </div>


        <div class="org-right">
            <div style="width: 100%;height: 60px;border: 1px solid #eee; display: flex;">
                <div style="width: 300px; height: 60px;margin-left: 8px;">
                    <el-button type="primary" style="margin-top: 15px;margin-left: 8px; width:70px; border-radius: 4px;" size="small"
                        @click="event.AddUser">新增</el-button>
                </div>
                <div style="width: 400px;margin-top: 8px;">
                    <el-input v-model="data.key" style="width: 350px" size="large" placeholder="请输入关键字查询"
                        :suffix-icon="Search" />
                </div>
            </div>



            <el-skeleton animated :rows="8" :loading="data.loading">
                <el-table :data="data.user" v-loading="data.isload" style="width:100%">
                    <el-table-column label="序号" width="70" type="index"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" label="账号" width="150" prop="account">

                    </el-table-column>

                    <el-table-column :show-overflow-tooltip="true" label="名称" width="120" prop="name">
                        <template #default="scope">
                            <el-tag>
                                {{ scope.row.name }}
                            </el-tag>
                        </template>
                    </el-table-column>



                    <el-table-column label="性别" width="100">
                        <template #default="scope">
                            <el-tag :type="scope.row.gender == '男' ? '' : 'danger'">{{ scope.row.gender }}</el-tag>
                        </template>
                    </el-table-column>




                    <el-table-column label="部门" width="170">
                        <template #default="scope">

                            <el-tooltip class="item" effect="dark" content="点击更换部门" placement="top-start">
                                <a style=" color: #0781FF;cursor: pointer;" @click="event.changedept(scope.row.uid)">{{
                                    scope.row.depname
                                }}</a>
                            </el-tooltip>

                        </template>
                    </el-table-column>

                    <el-table-column label="职务" width="120">
                        <template #default="scope">
                            <el-tooltip class="item" effect="dark" content="点击更换职务" placement="top-start">
                                <a style=" color: #0781FF;cursor: pointer;"
                                    @click="event.changeduties(scope.row.uid)">{{
                                        scope.row.dutyname }}</a>
                            </el-tooltip>
                        </template>
                    </el-table-column>

                    <el-table-column label="激活" width="100">
                        <template #default="scope">
                            <el-tag :type="scope.row.isActive == 0 ? 'danger' : 'success'">{{ scope.row.isActive == 0 ?
                                '否' : '是'
                            }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="禁用" width="100">
                        <template #default="scope">
                            <el-tag :type="scope.row.isBan == 0 ? 'success' : 'danger'">{{ scope.row.isBan == 0 ?
                                '否' : '是'
                            }}</el-tag>
                        </template>
                    </el-table-column>



                    <el-table-column label="操作" prop="name" width="120">
                        <template #default="scope">

                            <el-tooltip class="box-item" effect="light" :content="scope.row.isBan === 0 ? '禁用' : '启用'"
                                placement="left-start">

                                <el-button :type="scope.row.isBan === 0 ? 'danger' : 'success'"
                                    @click="event.Ban(scope.row.uid, scope.row.isBan)" :icon="Star" circle />


                            </el-tooltip>

                            <el-popconfirm @confirm="event.Delete(scope.row.uid)" title="确认删除吗？">
                                <template #reference>
                                    <el-button v-if="scope.row.isActive === 0" :icon="Delete" type="danger" circle>
                                    </el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>


                <div class="table-foot" style="margin-left: 450px; margin-top: 20px;">
                    <el-pagination background size="small" layout="prev, pager, next"
                        v-model:current-page="data.pages!.page" v-model:page-size="data.pages!.limit"
                        :total="data.pages?.total" />
                </div>



            </el-skeleton>




        </div>




        <el-dialog v-model="data.isOpen" :modal="data.isOpen">
            <el-skeleton animated :rows="8" :loading="data.isloading">
                <el-tree style="max-width: 600px" :default-expand-all="true" :highlight-current="true"
                    :expand-on-click-node="false" :icon="data.data.icon" :data="data.data" :props="defaultProps"
                    node-key="id" @node-click="event.right_Click">
                    <template #default="{ data }">

                        <i :class="data.icon" style="margin-right:2px"></i>

                        <span>{{ data.label }}</span>
                    </template>
                </el-tree>
                <!-- <template #footer>
                <div class="dialog-footer">
                    <el-button @click="data.isOpen = false">返回</el-button>

                    <el-popconfirm @confirm="event.saveDic" title="确定要修改吗？">
                        <template #reference>
                            <el-button type="primary">
                                修改
                            </el-button>
                        </template>
                    </el-popconfirm>

                </div>
                
            </template> -->
                <el-button type="success" @click="event.updatedep"
                    style="margin-top:20px;margin-left:30px">确认</el-button>
            </el-skeleton>
        </el-dialog>

        <el-dialog v-model="data.isOpen1" :modal="data.isOpen1">
            <el-skeleton animated :rows="8" :loading="data.isload1">
                <el-radio-group v-model="data.checkduty">
                    <el-radio v-for="item in data.radio" :key="item.dutyid" :label="item.dutyid">{{ item.dutyname
                        }}</el-radio>
                </el-radio-group>
                <el-button type="success" @click="event.updateduty" style="margin-left:30px">确认</el-button>
            </el-skeleton>
        </el-dialog>




    </div>
</template>

<script setup lang="ts">
import { Get_Dept, Get_DepUser, Ban_DepUser, Delete_User, Update_UserDep, Get_DepDuty, Update_UserDuty } from '../../api/org/dept'
import { reactive, watchEffect } from 'vue';
import type { Dept_Index_Data } from '../../utils/types';
import { Edit, Delete, Star } from '@element-plus/icons-vue'
import { msg } from '@/utils/msg'
import router from '@/router';
const data = reactive<Dept_Index_Data>({
    isFirst: true,
    data: [],
    loading: false,
    key: '',
    check: [],
    pages: {
        page: 1,
        limit: 10,
        total: 0
    },
    user: [],
    did: "",
    isload: true,
    isOpen: false,
    isloading: true,
    uid: "",
    zhiwu: [],
    isOpen1: false,
    isload1: true,
    radio: [],
    checkduty: "",
    dutyuid: ""
})

const event = {
    async right_Click(val) {
        data.check = val;
        data.did = val.id;
        // method.users();
    },
    async AddDept() {
        if (data.did == "") {
            msg({
                message: "请先选择部门"
            })
            return;
        }
        router.push('/org/adddept/' + data.did);
    },
    async open(id) {
        router.push('/org/updatedept/' + id);


    },
    AddUser() {
        if (data.did == "") {
            msg({
                message: "请先选择部门"
            })
            return;
        }
        router.push('/org/adduser/' + data.did);
    },
    async Ban(id: string, isban: number) {
        const res = await Ban_DepUser({
            uid: id,
            isBan: isban
        });
        if (res.code === 0) {
            msg(res);
            method.users();
        }
    },
    async Delete(id) {
        const res = await Delete_User({
            uid: id
        });
        if (res.code === 0) {
            msg(res);
            method.users();
        }
    },
    changedept(id) {
        data.uid = id;
        data.isOpen = true;
        setTimeout(() => {
            data.isloading = false;
        }, 1000);


    },
    async changeduties(id) {
        data.dutyuid = id;
        data.isOpen1 = true;
        const res = await Get_DepDuty({
            uid: id
        });
        if (res.code === 0) {
            data.radio = res.data.data;
            data.checkduty = res.data.dutyid;
            data.isload1 = false;
        }


    },
    saveDic() {

    },
    async updatedep() {

        const res = await Update_UserDep({
            uid: data.uid,
            depname: data.did
        });
        if (res.code === 0) {
            data.isOpen = false;
            msg(res);
            method.users();
        }
    },
    async updateduty() {

        const res = await Update_UserDuty({
            uid: data.dutyuid,
            dutyname: data.checkduty
        })
        if (res.code === 0) {
            data.isOpen1 = false;
            msg(res);
            method.users();
        }
    }
}

const method = {
    async bind() {
        const res = await Get_Dept();
        if (res.code === 0) {
            data.data = res.data;
            data.isFirst = false;
        }



    },

    async users() {

        data.isload = true;
        const ress = await Get_DepUser({
            id: data.did,
            page: data.pages?.page || 1,
            limit: data.pages?.limit || 10,
            key: data.key || ""
        })
        if (ress.code === 0) {
            data.user = ress.data.data;

            data.pages!.total = ress.data.total;
            data.loading = false;
            data.isload = false;
        }

    }


}
watchEffect(() => {
    method.bind();
    method.users();
})
</script>

<style scoped>
.main-org {
    display: flex;
    height: calc(100vh - 60px);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    margin: 8px;
}

.org-left {
    width: 230px;
    padding-left: 10px;
    padding-top:8px ;
    border-right: 1px solid #eee;
    position: relative;
}

/* .org-right {
    flex: 1;
    margin: 8px;
    background-color: #fdfbfb;
} */
</style>